<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <view class="header-content">
        <div class="header-left">
          <view class="back-button" @click="goBack">
            <uni-text class="fas fa-arrow-left"></uni-text>
          </view>
          <text class="header-title">我要反馈</text>
        </div>
        <div class="header-right"></div>
      </view>
    </header>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 反馈说明 -->
      <view class="feedback-notice">
        <view class="feedback-notice-content">
          <text class="fas fa-info-circle notice-icon"></text>
          <view class="notice-text">
            <text class="notice-title">反馈说明</text>
            <text class="notice-desc">如果您对投放记录、重量或收益有异议，请提交申诉，我们将在1-3个工作日内处理您的申诉请求。</text>
          </view>
        </view>
      </view>

      <!-- 反馈表单 -->
      <view class="form-container">
        <form @submit.prevent="submitFeedback">
          <!-- 选择反馈类型 -->
          <view class="form-item">
            <text class="form-label">反馈类型 <text class="required">*</text></text>
            <picker mode="selector" :range="feedbackTypes" range-key="name" v-model="feedbackData.type" @change="onTypeChange">
              <view class="picker">
                <text v-if="feedbackData.type !== -1">{{ feedbackTypes[feedbackData.type].name }}</text>
                <text v-else class="placeholder">请选择反馈类型</text>
                <text class="fas fa-chevron-down"></text>
              </view>
            </picker>
          </view>

          <!-- 选择投放记录 -->
          <view class="form-item">
            <text class="form-label">相关投放记录 <text class="required">*</text></text>
            <picker mode="selector" :range="records" range-key="displayText" v-model="feedbackData.recordIndex" @change="onRecordChange">
              <view class="picker">
                <text v-if="feedbackData.recordIndex !== -1">{{ records[feedbackData.recordIndex].displayText }}</text>
                <text v-else class="placeholder">请选择相关投放记录</text>
                <text class="fas fa-chevron-down"></text>
              </view>
            </picker>
          </view>

          <!-- 反馈描述 -->
          <view class="form-item">
            <text class="form-label">反馈描述 <text class="required">*</text></text>
            <textarea class="textarea" placeholder="请详细描述您遇到的问题..." v-model="feedbackData.description"></textarea>
            <text class="textarea-tip">请提供详细信息，以便我们更快处理您的反馈</text>
          </view>

          <!-- 上传图片证据 -->
          <view class="form-item">
            <text class="form-label">上传证据图片 (可选)</text>
            <view class="upload-area" @click="showUploadModal">
              <text class="fas fa-cloud-upload-alt upload-icon"></text>
              <text class="upload-text">点击或拖拽图片到此处上传</text>
              <text class="upload-tip">支持JPG、PNG格式，最多上传3张，每张不超过5MB</text>
            </view>

            <!-- 已上传图片预览 -->
            <view class="preview-container" v-if="imageList.length > 0">
              <view class="preview-item" v-for="(image, index) in imageList" :key="index">
                <image :src="image" mode="aspectFill"></image>
                <text class="fas fa-times remove-icon" @click="removeImage(index)"></text>
              </view>
            </view>
          </view>

          <!-- 联系方式 -->
          <view class="form-item">
            <text class="form-label">联系方式 <text class="required">*</text></text>
            <input class="input" type="tel" placeholder="请输入您的联系电话" v-model="feedbackData.contact" maxlength="11" />
          </view>

          <!-- 提交按钮 -->
          <button class="submit-btn" type="submit" :disabled="!isFormValid">
            <text class="fas fa-paper-plane"></text>
            <text>提交反馈</text>
          </button>
        </form>
      </view>

      <!-- 历史反馈记录 -->
      <view class="history-container">
        <text class="history-title">历史反馈记录</text>
        <view class="history-list">
          <view class="history-item" v-for="(item, index) in historyRecords" :key="index" @click="viewHistoryDetail(item)">
            <view class="history-item-header">
              <text class="history-item-title">{{ item.type }} - {{ item.category }}</text>
              <view class="status-badge" :class="item.status.toLowerCase()">
                <text>{{ item.status }}</text>
              </view>
            </view>
            <view class="history-item-meta">
              <text>{{ item.date }}</text>
              <text>{{ item.duration }}</text>
            </view>
            <text class="history-item-desc">{{ item.description }}</text>
            <view class="history-item-footer">
              <text class="view-detail">查看详情</text>
            </view>
          </view>
        </view>
      </view>
    </main>

    <!-- 图片上传模态框 -->
    <view class="modal-mask" v-if="showModal" @click="hideUploadModal"></view>
    <view class="modal-container" v-if="showModal">
      <view class="modal-content">
        <text class="modal-title">上传图片</text>
        <view class="modal-buttons">
          <button class="modal-btn" @click="takePhoto">
            <text class="fas fa-camera"></text>
            <text>拍摄照片</text>
          </button>
          <button class="modal-btn" @click="chooseImage">
            <text class="fas fa-image"></text>
            <text>从相册选择</text>
          </button>
          <button class="modal-btn cancel" @click="hideUploadModal">
            <text>取消</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      imageList: [],
      feedbackData: {
        type: -1,
        recordIndex: -1,
        description: '',
        contact: '',
        images: []
      },
      feedbackTypes: [
        { id: 'weight', name: '重量异议' },
        { id: 'category', name: '分类错误' },
        { id: 'reward', name: '收益异常' },
        { id: 'system', name: '系统故障' },
        { id: 'other', name: '其他问题' }
      ],
      records: [
        { id: 'record1', displayText: '2023-06-15 09:30 - 纸壳类 (2.5kg)' },
        { id: 'record2', displayText: '2023-06-12 16:45 - 织物类 (2.8kg)' },
        { id: 'record3', displayText: '2023-06-10 11:20 - 混合类 (1.8kg)' },
        { id: 'record4', displayText: '2023-06-08 15:40 - 塑料瓶 (3.2kg)' },
        { id: 'record5', displayText: '2023-06-05 08:15 - 金属类 (1.5kg)' }
      ],
      historyRecords: [
        {
          id: 'history1',
          type: '重量异议',
          category: '纸壳类投放',
          status: '已解决',
          date: '2023-05-28 14:30',
          duration: '处理时长: 1天',
          description: '我认为本次投放的纸壳重量记录有误，实际重量应该在3.5kg左右，但系统只记录了2.1kg。'
        },
        {
          id: 'history2',
          type: '收益异常',
          category: '塑料瓶投放',
          status: '处理中',
          date: '2023-06-05 09:15',
          duration: '已受理: 1天',
          description: '本次塑料瓶投放收益明显低于往常，同样数量的瓶子之前都有5元左右收益，这次只有2.3元。'
        }
      ]
    };
  },
  computed: {
    isFormValid() {
      return this.feedbackData.type !== -1 && 
             this.feedbackData.recordIndex !== -1 && 
             this.feedbackData.description.trim() !== '' && 
             this.feedbackData.contact.trim() !== '' &&
             /^1[3-9]\d{9}$/.test(this.feedbackData.contact);
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },

    // 反馈类型改变
    onTypeChange(e) {
      this.feedbackData.type = e.detail.value;
    },

    // 投放记录改变
    onRecordChange(e) {
      this.feedbackData.recordIndex = e.detail.value;
    },

    // 显示上传模态框
    showUploadModal() {
      if (this.imageList.length >= 3) {
        uni.showToast({
          title: '最多只能上传3张图片',
          icon: 'none'
        });
        return;
      }
      this.showModal = true;
    },

    // 隐藏上传模态框
    hideUploadModal() {
      this.showModal = false;
    },

    // 拍摄照片
    takePhoto() {
      uni.chooseImage({
        count: 3 - this.imageList.length,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: (res) => {
          this.imageList = [...this.imageList, ...res.tempFilePaths];
          this.hideUploadModal();
        }
      });
    },

    // 从相册选择
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.imageList.length,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.imageList = [...this.imageList, ...res.tempFilePaths];
          this.hideUploadModal();
        }
      });
    },

    // 移除图片
    removeImage(index) {
      this.imageList.splice(index, 1);
    },

    // 提交反馈
    submitFeedback() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整的反馈信息',
          icon: 'none'
        });
        return;
      }

      // 模拟提交数据
      const submitData = {
        ...this.feedbackData,
        recordId: this.records[this.feedbackData.recordIndex].id,
        typeId: this.feedbackTypes[this.feedbackData.type].id,
        images: this.imageList
      };

      console.log('提交的反馈数据:', submitData);

      // 显示提交成功提示
      uni.showToast({
        title: '反馈提交成功！我们将尽快处理您的反馈请求。',
        icon: 'success',
        duration: 2000,
        complete: () => {
          // 2秒后返回上一页
          setTimeout(() => {
            this.goBack();
          }, 2000);
        }
      });
    },

    // 查看历史反馈详情
    viewHistoryDetail(item) {
      uni.showModal({
        title: '反馈详情',
        content: `\n类型：${item.type} - ${item.category}\n\n状态：${item.status}\n\n提交时间：${item.date}\n\n${item.duration}\n\n问题描述：${item.description}`,
        showCancel: false
      });
    }
  }
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f2f3f5;
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-button {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1d2129;
}

/* 主内容区域 */
.main-content {
  padding: 100rpx 30rpx 30rpx;
}

/* 反馈说明 */
.feedback-notice {
  background-color: #e8f3ff;
  border: 1px solid #b4d7ff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 30rpx;
}

.feedback-notice-content {
  display: flex;
  align-items: flex-start;
}

.notice-icon {
  font-size: 32rpx;
  color: #165dff;
  margin-right: 20rpx;
  margin-top: 4rpx;
}

.notice-text {
  flex: 1;
}

.notice-title {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #165dff;
  margin-bottom: 10rpx;
}

.notice-desc {
  display: block;
  font-size: 26rpx;
  color: #666666;
  line-height: 38rpx;
}

/* 表单容器 */
.form-container {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 16rpx;
}

.required {
  color: #f53f3f;
}

/* 选择器样式 */
.picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  border: 1px solid #e5e5e5;
}

.picker text:first-child {
  font-size: 28rpx;
  color: #333333;
}

.placeholder {
  color: #999999 !important;
}

.picker text:last-child {
  font-size: 24rpx;
  color: #999999;
}

/* 文本域样式 */
.textarea {
  width: 100%;
  height: 240rpx;
  padding: 20rpx 24rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  border: 1px solid #e5e5e5;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  box-sizing: border-box;
}

.textarea-tip {
  display: block;
  font-size: 24rpx;
  color: #999999;
  margin-top: 12rpx;
}

/* 上传区域 */
.upload-area {
  border: 2px dashed #e5e5e5;
  border-radius: 12rpx;
  padding: 40rpx 0;
  text-align: center;
  background-color: #fafafa;
  transition: all 0.3s;
}

.upload-area:active {
  border-color: #165dff;
  background-color: #f0f7ff;
}

.upload-icon {
  display: block;
  font-size: 60rpx;
  color: #cccccc;
  margin-bottom: 16rpx;
}

.upload-text {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 10rpx;
}

.upload-tip {
  display: block;
  font-size: 24rpx;
  color: #999999;
}

/* 预览图片 */
.preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 20rpx;
}

.preview-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  background-color: #f5f5f5;
}

.preview-item image {
  width: 100%;
  height: 100%;
}

.remove-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 24rpx;
  border-radius: 50%;
}

/* 输入框样式 */
.input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  background-color: #f9f9f9;
  border-radius: 12rpx;
  border: 1px solid #e5e5e5;
  font-size: 28rpx;
  color: #333333;
  box-sizing: border-box;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 96rpx;
  background-color: #165dff;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.submit-btn:active {
  background-color: #0e66d9;
}

.submit-btn[disabled] {
  background-color: #cccccc;
}

.submit-btn text:first-child {
  margin-right: 10rpx;
  font-size: 28rpx;
}

/* 历史反馈记录 */
.history-container {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.history-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #1d2129;
  margin-bottom: 24rpx;
}

.history-list {
  gap: 24rpx;
}

.history-item {
  padding: 24rpx;
  border: 1px solid #f0f0f0;
  border-radius: 12rpx;
  background-color: #fafafa;
  transition: all 0.3s;
}

.history-item:active {
  background-color: #f0f0f0;
}

.history-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.history-item-title {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 16rpx;
}

.status-badge {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-badge.已解决 {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.status-badge.处理中 {
  background-color: #fff3e0;
  color: #e65100;
}

.history-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.history-item-meta text {
  font-size: 24rpx;
  color: #999999;
}

.history-item-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 26rpx;
  color: #666666;
  line-height: 38rpx;
  margin-bottom: 16rpx;
}

.history-item-footer {
  text-align: right;
}

.view-detail {
  font-size: 26rpx;
  color: #165dff;
  font-weight: 500;
}

/* 模态框样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 30rpx;
}

.modal-content {
  width: 100%;
  max-width: 600rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.modal-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #1d2129;
  text-align: center;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.modal-buttons {
  padding: 20rpx;
}

.modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96rpx;
  background-color: #f9f9f9;
  border: 1px solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 20rpx;
}

.modal-btn:active {
  background-color: #f0f0f0;
}

.modal-btn:last-child {
  margin-bottom: 0;
}

.modal-btn.text {
  color: #666666;
}

.modal-btn.cancel {
  background-color: #ffffff;
  color: #999999;
}

.modal-btn text:first-child {
  margin-right: 16rpx;
  font-size: 28rpx;
}
</style>